﻿<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="zh-CN" xmlns:wb="http://open.weibo.com/wb">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="zh-CN">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<title>HTML5应用 | HTML5资源教程 | 第2页</title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="https://www.html5tricks.com/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="https://www.html5tricks.com/wp-content/themes/twentytwelve/js/html5.js" type="text/javascript"></script>
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="HTML5资源教程 &raquo; Feed" href="https://www.html5tricks.com/feed" />
<link rel="alternate" type="application/rss+xml" title="HTML5资源教程 &raquo; 评论Feed" href="https://www.html5tricks.com/comments/feed" />
<link rel="alternate" type="application/rss+xml" title="HTML5资源教程 &raquo; HTML5应用分类目录Feed" href="https://www.html5tricks.com/category/html5-demo/feed" />
<link rel='stylesheet' id='twentytwelve-style-css'  href='https://www.html5tricks.com/wp-content/themes/twentytwelve/style.css?ver=3.6-RC2' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentytwelve-ie-css'  href='https://www.html5tricks.com/wp-content/themes/twentytwelve/css/ie.css?ver=20121010' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='wp-pagenavi-css'  href='https://www.html5tricks.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.html5tricks.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.html5tricks.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.6-RC2" />
<style type="text/css">
.tricksButtons{
text-align:center;
}
.tricksButtons a,.read-more a {
margin-right: 16px;
margin-bottom: 10px;
display: inline-block;
text-transform: uppercase;
padding: 1em 1.5em 0.75em;
border-radius: 2px;
font-weight: bold;
border: none;
color: #fff !important;
text-decoration: none;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.tricksButtons a:hover,.read-more a:hover{
opacity:0.9;
}
.tricksButtons .demo{
font-size: 18px;
padding: 1.2em 2.5em 1em;
background-color: #a5d16d;
box-shadow: 0 0 5px #a4cf6c inset, 0 1px 1px #eee;
}
.tricksButtons .download{
margin-right:0;
font-size: 18px;
padding: 1.2em 2.5em 1em;
background-color: #93d0ea;
box-shadow: 0 0 5px #8fcde7 inset, 0 1px 1px #eee;
}

.read-more{
text-align:center
}
.read-more a{
font-size: 18px;
padding: 1.2em 2.5em 1em;
background-color: #a5d16d;
box-shadow: 0 0 5px #a4cf6c inset, 0 1px 1px #eee;
}

.contactItem{ float:right;margin-left:70px;text-align:center}
.contactItem .txt{font-weight:bold;font-size:16px;text-align:center;padding:3px 0}
.contactItem a{ text-decoration:none;color:#6a6a6a}
</style>
</head>

<body class="archive paged category category-html5-demo category-3 paged-2 category-paged-2 single-author">
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
<div style="width:701px;height:90px;float:right;">
    <div class="contactItem"><a href="https://www.html5tricks.com/follow-rss#weibo" target="_blank"><img src="https://www.html5tricks.com/wp-content/uploads/2014/05/icon_weibo.jpg" /><p class="txt">微博关注</p></p></div>
    <div class="contactItem"><a href="https://www.html5tricks.com/follow-rss#mail" target="_blank"><img src="https://www.html5tricks.com/wp-content/uploads/2014/05/icon_email.png" /><p class="txt">邮件订阅</p></a></div>
    <div class="contactItem"><a href="https://www.html5tricks.com/follow-rss#rss" target="_blank"><img src="https://www.html5tricks.com/wp-content/uploads/2014/05/icon_rss.png" /><p class="txt">RSS订阅</p></a></div>
</div>
		<hgroup style="width:252px;float:left">
<a href="https://www.html5tricks.com/" title="HTML5资源教程" rel="home">
<img src="https://www.html5tricks.com/wp-content/uploads/2014/06/html5tricks-logo.jpg" alt="HTML5资源教程" title="HTML5资源教程" /></a>
			
<!--<div style="margin-top:10px">
<div style="float:left">
<wb:follow-button uid="5052963352" type="red_2" width="115" height="24" ></wb:follow-button></div>
<iframe  src="http://follow.v.t.qq.com/index.php?c=follow&a=quick&appkey=801484131&sign=b9b10d49&v=2&name=html5tricks&style=5&t=1396508619628&f=1" frameborder="0" scrolling="auto" width="110" height="24" marginwidth="0" marginheight="0" allowtransparency="true"></iframe>
</div>-->

		</hgroup>
<div style="clear:both;"></div>
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle">菜单</h3>
			<a class="assistive-text" href="#content" title="跳至内容">跳至内容</a>
			<div class="menu-menu-1-container"><ul id="menu-menu-1" class="nav-menu"><li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://www.html5tricks.com/">首页</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-6"><a href="https://www.html5tricks.com/category/html5-demo">HTML5应用</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7"><a href="https://www.html5tricks.com/category/html5-tutorials">HTML5教程</a></li>
<li id="menu-item-1286" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1286"><a href="https://www.html5tricks.com/category/css3-tutorials">CSS3教程</a></li>
<li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="https://www.html5tricks.com/category/jquery-plugin">jQuery插件</a>
<ul class="sub-menu">
	<li id="menu-item-2931" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2931"><a href="https://www.html5tricks.com/category/jquery-plugin/jquery-paging">jQuery分页插件</a></li>
</ul>
</li>
<li id="menu-item-1154" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1154"><a href="https://www.html5tricks.com/category/html-tutorials">HTML教程</a></li>
<li id="menu-item-1153" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1153"><a href="https://www.html5tricks.com/category/css-tutorials">CSS教程</a></li>
</ul></div>		</nav><!-- #site-navigation -->

			</header><!-- #masthead -->
	<div id="main" class="wrapper">
	<section id="primary" class="site-content">
		<div id="content" role="main">

					<header class="archive-header">
				<h1 class="archive-title">分类目录归档：<span>HTML5应用</span></h1>

						</header><!-- .archive-header -->

			
	<article id="post-6124" class="post-6124 post type-post status-publish format-standard hentry category-html5-demo tag-css3 tag-258">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/pure-css3-windmill.html" rel="bookmark">纯CSS3超逼真的风车旋转动画</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
343 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/pure-css3-windmill.html#respond" title="《纯CSS3超逼真的风车旋转动画》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
				2018-12-30 11:17:57				</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>很早以前，我们给大家分享过一款<a href="https://www.html5tricks.com/html5-css3-windmill.html" target="_blank">基于HTML5和CSS3的风车动画</a>，效果还是不错的。这次我们介绍的同样是一个基于CSS3的风车旋转动画，只不过这个风车的元素更丰富，更像是在一个美丽的村庄中，一个风车在日落的渲染下不停的旋转工作。</p>
<p><a href="https://www.html5tricks.com/demo/pure-css3-windmill/index.html" target="_blank"><img class="alignnone size-full wp-image-6125" alt="pure-css3-windmill" src="https://www.html5tricks.com/wp-content/uploads/2018/12/pure-css3-windmill.png" width="610" height="385" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/pure-css3-windmill/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/pure-css3-windmill.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/pure-css3-windmill.html" title="11:17 上午" rel="bookmark"><time class="entry-date" datetime="2018-12-30T11:17:57+08:00">十二月 30, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e5%8a%a8%e7%94%bb" rel="tag">CSS3动画</a>、<a href="https://www.html5tricks.com/tag/%e9%a3%8e%e8%bd%a6%e5%8a%a8%e7%94%bb" rel="tag">风车动画</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6121" class="post-6121 post type-post status-publish format-standard hentry category-html5-demo tag-css3 tag-205">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/css3-styled-dropdown-menu.html" rel="bookmark">样式独特的纯CSS3自定义下拉菜单</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
265 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/css3-styled-dropdown-menu.html#respond" title="《样式独特的纯CSS3自定义下拉菜单》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
				2018-12-29 20:15:42				</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>不久前，我们给大家分享过一个<a href="https://www.html5tricks.com/jquery-multi-check-selectbox.html" rel="bookmark">jQuery自定义样式下拉框 支持分组、多选和搜索</a>，应该说还是挺实用的。这次我们要介绍的也是一个下拉菜单，基于CSS3实现，它的特点是主菜单有一层阴影，这样整个下拉菜单看起来就会有3D立体的视觉效果，是不是很棒？</p>
<p><a href="https://www.html5tricks.com/demo/css3-styled-dropdown-menu/index.html" target="_blank"><img class="alignnone size-full wp-image-6122" alt="css3-styled-dropdown-menu" src="https://www.html5tricks.com/wp-content/uploads/2018/12/css3-styled-dropdown-menu.png" width="610" height="375" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/css3-styled-dropdown-menu/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/css3-styled-dropdown-menu.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/css3-styled-dropdown-menu.html" title="8:15 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-29T20:15:42+08:00">十二月 29, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e8%8f%9c%e5%8d%95" rel="tag">CSS3菜单</a>、<a href="https://www.html5tricks.com/tag/%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95" rel="tag">下拉菜单</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6118" class="post-6118 post type-post status-publish format-standard hentry category-html5-demo tag-css3">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/css3-visible-shadow.html" rel="bookmark">CSS3可调节并实时预览的阴影效果</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
281 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/css3-visible-shadow.html#respond" title="《CSS3可调节并实时预览的阴影效果》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>在现代网页中，阴影效果是使用最为广泛的效果之一，同时实现起来也是最为方便的，一行CSS3代码即可。但是我们可能对CSS3阴影属性的值很难把控，你可能不是很清楚到底shadow值要设置多少才会达到你要的效果。今天这款应用就可以帮助你解决这个问题，通过滑杆滑动即可动态改变shadow值，同时实时预览阴影效果。</p>
<p><a href="https://www.html5tricks.com/demo/css3-visible-shadow/index.html" target="_blank"><img class="alignnone size-full wp-image-6119" alt="css3-visible-shadow" src="https://www.html5tricks.com/wp-content/uploads/2018/12/css3-visible-shadow.png" width="610" height="446" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/css3-visible-shadow/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/css3-visible-shadow.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/css3-visible-shadow.html" title="4:43 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-29T16:43:17+08:00">十二月 29, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e9%98%b4%e5%bd%b1" rel="tag">CSS3阴影</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6114" class="post-6114 post type-post status-publish format-standard hentry category-html5-demo tag-flex tag-256">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/flexbox-responsive-honeycomb.html" rel="bookmark">基于Flexbox的响应式蜂巢样式布局</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
328 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/flexbox-responsive-honeycomb.html#respond" title="《基于Flexbox的响应式蜂巢样式布局》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>Flex布局方式目前使用非常广泛，它比传统的盒子模型相比更加灵活方便。这次我们给大家带来一个基于Flex布局的典型例子，它是一个基于Flexbox的响应式蜂巢样式布局，我们可以将图片放置到这个蜂巢样式的布局中，这样就可以制作一个富有创意的照片墙。</p>
<p><a href="https://www.html5tricks.com/demo/flexbox-responsive-honeycomb/index.html" target="_blank"><img class="alignnone size-full wp-image-6115" alt="flexbox-responsive-honeycomb" src="https://www.html5tricks.com/wp-content/uploads/2018/12/flexbox-responsive-honeycomb.png" width="610" height="347" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/flexbox-responsive-honeycomb/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/flexbox-responsive-honeycomb.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/flexbox-responsive-honeycomb.html" title="3:53 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-29T15:53:32+08:00">十二月 29, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/flex%e5%b8%83%e5%b1%80" rel="tag">Flex布局</a>、<a href="https://www.html5tricks.com/tag/%e5%93%8d%e5%ba%94%e5%bc%8f%e5%b8%83%e5%b1%80" rel="tag">响应式布局</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6107" class="post-6107 post type-post status-publish format-standard hentry category-html5-demo tag-css3">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/css3-windy-switch.html" rel="bookmark">CSS3风速切换场景动画</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
281 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/css3-windy-switch.html#respond" title="《CSS3风速切换场景动画》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>今天给大家分享一个基于CSS3的风速切换场景动画，首先页面上的场景画面是通过CSS绘制而成，总体来说是一个刮风天气场景，风车会转动，树叶也会随风飘摇。此时你可以通过一个开关来切换风速，风速变化的同时，风车的转速和树叶飘动的幅度也会随之变化，反应一个真实的刮风天气，而这一切都是通过CSS3的动画特性来完成的。</p>
<p><a href="https://www.html5tricks.com/demo/css3-windy-switch/index.html" target="_blank"><img class="alignnone size-full wp-image-6108" alt="css3-windy-switch" src="https://www.html5tricks.com/wp-content/uploads/2018/12/css3-windy-switch.png" width="610" height="442" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/css3-windy-switch/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/css3-windy-switch.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/css3-windy-switch.html" title="2:18 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-29T14:18:16+08:00">十二月 29, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e5%8a%a8%e7%94%bb" rel="tag">CSS3动画</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6102" class="post-6102 post type-post status-publish format-standard hentry category-html5-demo tag-html5 tag-three-js">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/threejs-impact-checking.html" rel="bookmark">基于Three.js的碰撞检测穿马路动画</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
440 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/threejs-impact-checking.html#respond" title="《基于Three.js的碰撞检测穿马路动画》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>Three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画，主要使用了Three.js的碰撞检测功能，马路上穿梭着很多车辆，你可以通过方向键控制小方块的行进方向，顺利通过马路，如果方块和行驶的车辆发生碰撞，则游戏结束。</p>
<p><a href="https://www.html5tricks.com/demo/threejs-impact-checking/index.html" target="_blank"><img class="alignnone size-full wp-image-6104" alt="threejs-impact-checking" src="https://www.html5tricks.com/wp-content/uploads/2018/12/threejs-impact-checking.png" width="610" height="360" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/threejs-impact-checking/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/threejs-impact-checking.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/threejs-impact-checking.html" title="1:26 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-29T13:26:49+08:00">十二月 29, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb" rel="tag">HTML5动画</a>、<a href="https://www.html5tricks.com/tag/three-js" rel="tag">Three.js</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6090" class="post-6090 post type-post status-publish format-standard hentry category-html5-demo tag-css3 tag-47">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/css3-accordion-menu-animate.html" rel="bookmark">CSS3可自动折叠的垂直手风琴菜单</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
267 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/css3-accordion-menu-animate.html#respond" title="《CSS3可自动折叠的垂直手风琴菜单》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
				2018-12-27 14:04:26				</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>之前我们分享过很多手风琴菜单，大部分是垂直的手风琴菜单，都非常实用，比如这个<a href="https://www.html5tricks.com/jquery-css3-accordion-menu-t.html" target="_blank" rel="bookmark">CSS3深色背景的垂直手风琴菜单</a>。这次我们继续为大家带来一款基于CSS3的垂直手风琴菜单，除了和其他手风琴菜单那样可以自动折叠菜单项以外，它还有一个特点是折叠和展开时代有平滑的淡入淡出效果。</p>
<p><a href="https://www.html5tricks.com/demo/css3-accordion-menu-animate/index.html" target="_blank"><img class="alignnone size-full wp-image-6091" alt="css3-accordion-menu-animate" src="https://www.html5tricks.com/wp-content/uploads/2018/12/css3-accordion-menu-animate.png" width="610" height="603" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/css3-accordion-menu-animate/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/css3-accordion-menu-animate.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/css3-accordion-menu-animate.html" title="2:04 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-27T14:04:26+08:00">十二月 27, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e8%8f%9c%e5%8d%95" rel="tag">CSS3菜单</a>、<a href="https://www.html5tricks.com/tag/%e6%89%8b%e9%a3%8e%e7%90%b4%e8%8f%9c%e5%8d%95" rel="tag">手风琴菜单</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6087" class="post-6087 post type-post status-publish format-standard hentry category-html5-demo tag-html5 tag-svg tag-252">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/html5-svg-image-pixelization.html" rel="bookmark">HTML5/SVG图片切换马赛克过渡动画</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
238 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/html5-svg-image-pixelization.html#respond" title="《HTML5/SVG图片切换马赛克过渡动画》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>早些时候，我们给大家分享过一款<a href="https://www.html5tricks.com/html5-canvas-image-mosaics.html" target="_blank">基于HTML5 Canvas的图片马赛克模糊效果</a>，并且文章中对其实现原理进行了简单解说。今天我们要介绍的也是关于图片马赛克效果的，它是一个基于<span class='wp_keywordlink'><a href="https://www.html5tricks.com/" title="HTML5" target="_blank">HTML5</a></span>和SVG的图片切换马赛克过渡动画，与普通的淡入淡出切换效果不同，它在图片切换时渲染马赛克的滤镜效果，实现简单，而且也非常具有创意。</p>
<p><a href="https://www.html5tricks.com/demo/html5-svg-image-pixelization/index.html" target="_blank"><img class="alignnone size-full wp-image-6088" alt="html5-svg-image-pixelization" src="https://www.html5tricks.com/wp-content/uploads/2018/12/html5-svg-image-pixelization.png" width="610" height="432" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/html5-svg-image-pixelization/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/html5-svg-image-pixelization.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/html5-svg-image-pixelization.html" title="1:10 下午" rel="bookmark"><time class="entry-date" datetime="2018-12-27T13:10:37+08:00">十二月 27, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb" rel="tag">HTML5动画</a>、<a href="https://www.html5tricks.com/tag/svg" rel="tag">SVG</a>、<a href="https://www.html5tricks.com/tag/%e9%a9%ac%e8%b5%9b%e5%85%8b%e5%8a%a8%e7%94%bb" rel="tag">马赛克动画</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6084" class="post-6084 post type-post status-publish format-standard hentry category-html5-demo tag-css3 tag-250 tag-251">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/html5-canvas-snow-globe.html" rel="bookmark">HTML5 Canvas圣诞节雪人球动画</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
182 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/html5-canvas-snow-globe.html#respond" title="《HTML5 Canvas圣诞节雪人球动画》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>记得很早以前给大家分享过一个<a href="https://www.html5tricks.com/pure-css3-snowman.html" target="_blank">基于纯CSS3的可爱雪人动画</a>，同时还伴随着下雪动画。今天我们来分享一个基于<span class='wp_keywordlink'><a href="https://www.html5tricks.com/" title="HTML5" target="_blank">HTML5</a></span> Canvas的圣诞节雪人球动画，我们将雪人绘制到一个球中，然后点击鼠标将球抖动一下，球里面就飘起了雪花，非常的浪漫。</p>
<p><a href="https://www.html5tricks.com/demo/html5-canvas-snow-globe/index.html" target="_blank"><img class="alignnone size-full wp-image-6085" alt="html5-canvas-snow-globe" src="https://www.html5tricks.com/wp-content/uploads/2018/12/html5-canvas-snow-globe.png" width="610" height="416" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/html5-canvas-snow-globe/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/html5-canvas-snow-globe.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/html5-canvas-snow-globe.html" title="11:52 上午" rel="bookmark"><time class="entry-date" datetime="2018-12-27T11:52:53+08:00">十二月 27, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e5%8a%a8%e7%94%bb" rel="tag">CSS3动画</a>、<a href="https://www.html5tricks.com/tag/%e5%9c%a3%e8%af%9e%e8%8a%82" rel="tag">圣诞节</a>、<a href="https://www.html5tricks.com/tag/%e9%9b%aa%e4%ba%ba" rel="tag">雪人</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->

	<article id="post-6081" class="post-6081 post type-post status-publish format-standard hentry category-html5-demo tag-css3 tag-249">
				<header class="entry-header">
									<h1 class="entry-title">
				<a href="https://www.html5tricks.com/svg-css3-parallax-portrait.html" rel="bookmark">CSS3 3D视差人物画像 可跟随鼠标摇头斜眼</a>
			</h1>
						<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px;margin-left:5px">
347 人浏览</div>
				<div class="comments-link" style="float:left;margin-top:20px;margin-right:30px">
					<a href="https://www.html5tricks.com/svg-css3-parallax-portrait.html#respond" title="《CSS3 3D视差人物画像 可跟随鼠标摇头斜眼》上的评论"><span class="leave-reply">发表回复</span></a>				</div><!-- .comments-link -->
				<div class="comments-link" style="float:left;margin-top:20px">
								</div>
<style type="text/css">
.comments-link a{text-decoration:none}
</style>
			
<div style="clear:both"></div>
		</header><!-- .entry-header -->

				<div class="entry-content">
			<p>这次我们分享一个非常酷的CSS3动画。它是一个3D的视差人物画像，并且人物的头和眼睛可以跟随鼠标移动，如果在移动设备上的话，用手指移动屏幕也可以实现这个效果。更加厉害的是，这个人物画像在加载时是一幅素描画像，但是会逐渐变成油画的效果，你们可以研究一下这是如何实现的。</p>
<p><a href="https://www.html5tricks.com/demo/svg-css3-parallax-portrait/index.html" target="_blank"><img class="alignnone size-full wp-image-6082" alt="svg-css3-parallax-portrait" src="https://www.html5tricks.com/wp-content/uploads/2018/12/svg-css3-parallax-portrait.png" width="610" height="419" /></a></p>
<p class="tricksButtons"><a class="demo" href="https://www.html5tricks.com/demo/svg-css3-parallax-portrait/index.html" target="_blank">在线演示</a><a class="download" href="https://www.html5tricks.com/download/svg-css3-parallax-portrait.rar" target="_blank">源码下载</a></p>
					</div><!-- .entry-content -->
		
		<footer class="entry-meta">
			本条目发布于<a href="https://www.html5tricks.com/svg-css3-parallax-portrait.html" title="10:45 上午" rel="bookmark"><time class="entry-date" datetime="2018-12-27T10:45:10+08:00">十二月 27, 2018</time></a>。属于<a href="https://www.html5tricks.com/category/html5-demo" title="查看HTML5应用中的全部文章" rel="category tag">HTML5应用</a>分类，被贴了 <a href="https://www.html5tricks.com/tag/css3%e5%8a%a8%e7%94%bb" rel="tag">CSS3动画</a>、<a href="https://www.html5tricks.com/tag/%e4%ba%ba%e7%89%a9%e5%8a%a8%e7%94%bb" rel="tag">人物动画</a> 标签。<span class="by-author">作者是<span class="author vcard"><a class="url fn n" href="https://www.html5tricks.com/author/sxwgf" title="查看所有由sxwgf发布的文章" rel="author">sxwgf</a></span>。</span>								</footer><!-- .entry-meta -->
	</article><!-- #post -->
		<nav id="nav-below" class="navigation" role="navigation">
			<h3 class="assistive-text">文章导航</h3>
			<div class='wp-pagenavi'>
<span class='pages'>第2页 共96页</span><a class="previouspostslink" href="https://www.html5tricks.com/category/html5-demo/">«</a><a class="page smaller" href="https://www.html5tricks.com/category/html5-demo/">1</a><span class='current'>2</span><a class="page larger" href="https://www.html5tricks.com/category/html5-demo/page/3">3</a><a class="page larger" href="https://www.html5tricks.com/category/html5-demo/page/4">4</a><a class="page larger" href="https://www.html5tricks.com/category/html5-demo/page/5">5</a><a class="page larger" href="https://www.html5tricks.com/category/html5-demo/page/6">6</a><a class="page larger" href="https://www.html5tricks.com/category/html5-demo/page/7">7</a><a class="page larger" href="https://www.html5tricks.com/category/html5-demo/page/8">8</a><span class='extend'>...</span><a class="nextpostslink" href="https://www.html5tricks.com/category/html5-demo/page/3">»</a><a class="last" href="https://www.html5tricks.com/category/html5-demo/page/96">末页 »</a>
</div>		</nav><!-- #nav-below .navigation -->
	
		
		</div><!-- #content -->
	</section><!-- #primary -->


			<div id="secondary" class="widget-area" role="complementary">
			<aside id="text-3" class="widget widget_text">			<div class="textwidget"><style type="text/css">
.hot{margin-bottom:30px}
.hot h2{font-size:18px}
.hot a{text-decoration:none}
.weibo{margin-bottom:20px}
.rss{margin-bottom:20px;text-align:center;border:#333 solid 2px;padding:10px 5px 5px 5px}
</style>

<div class="hot">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- html5tricks-left-big -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-4188263447419139"
     data-ad-slot="5829084807"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
		</aside>		</div><!-- #secondary -->
		</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">
		<div class="site-info">
			<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010502000956"><p>浙公网安备 33010502000956号</p></a>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<script type='text/javascript' src='https://www.html5tricks.com/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0'></script>

<div style="display:none">
<script language="javascript" type="text/javascript" src="//js.users.51.la/16741667.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F9346d6b49a73fab9c4d557ed45e0dad0' type='text/javascript'%3E%3C/script%3E"));
</script>

</div>


</body>
</html>